<template>
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <a  title="保存" class="btn btn-primary" v-on:click="do_edit()" >
                        <i class="fa fa-save"></i>
                    </a>
                    <a href="#" data-toggle="tooltip" title=""
                       class="btn btn-default" data-original-title="取消">
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>客户</h1>
                <ul class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">客户</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">    <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> 编辑客户</h3>
            </div>
            <div class="panel-body">
                <!---->
                <form action="#" method="post" enctype="multipart/form-data" id="form-customer" class="form-horizontal">

                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-general" data-toggle="tab" aria-expanded="true">基本信息</a></li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab-general">
                            <div class="row">
                                <div class="col-sm-2">
                                    <ul class="nav nav-pills nav-stacked" id="address">
                                        <li class="active"><a href="#tab-customer" data-toggle="tab" aria-expanded="true">基本信息</a></li>
                                        <li v-for="item,index in address_list">
                                            <a v-bind:href="'#tab-address'+index" data-toggle="tab" aria-expanded="false">
                                                <i class="fa fa-minus-circle" v-on:click="remove_address( item )"></i>
                                                地址 {{index+1}}</a>
                                        </li>
                                        <li id="address-add">
                                            <a v-on:click="add_address()">
                                                <i class="fa fa-plus-circle"></i> 添加地址</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-sm-10">
                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-customer">
                                            <fieldset>
                                                <legend>客户详情</legend>
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-customer-group">客户等级</label>
                                                    <div class="col-sm-10">
                                                        <select v-model="customer_info.customer_group_id" id="input-customer-group" class="form-control">
                                                            <option v-for="item in customer_group_list" v-bind:value="item.id" selected="selected">{{item.name}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-fullname">姓名</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="customer_info.name" placeholder="姓名" id="input-fullname" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-telephone">电话</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="customer_info.telephone" placeholder="电话" id="input-telephone" class="form-control">
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <fieldset class="hidden">
                                                <legend>密码 <span style="font-size:12px; color:#666">(不修改密码请留空)</span></legend>
                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-password">密码</label>
                                                    <div class="col-sm-10">
                                                        <input type="password" v-model="password" placeholder="密码" id="input-password" class="form-control" autocomplete="off">
                                                    </div>
                                                </div>
                                                <div class="form-group required">
                                                    <label class="col-sm-2 control-label" for="input-confirm">确认密码</label>
                                                    <div class="col-sm-10">
                                                        <input type="password" v-model="password_confirm" placeholder="确认密码" autocomplete="off" id="input-confirm" class="form-control">
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <fieldset>
                                                <legend>其它</legend>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label" for="input-status">状态</label>
                                                    <div class="col-sm-10">
                                                        <select v-model="customer_info.status" id="input-status" class="form-control">
                                                            <option value="1" >启用</option>
                                                            <option value="0" >禁用</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </fieldset>
                                        </div>
                                        <div class="tab-pane" v-for="item,index in address_list" v-bind:id="'tab-address'+index" >
                                            <input type="hidden" name="address[3][address_id]" value="">
                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label" >姓名</label>
                                                <div class="col-sm-10">
                                                    <input type="text"
                                                           v-model="item.name"
                                                           placeholder="姓名" id="input-fullname3"
                                                           class="form-control"></div>
                                            </div>
                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label" >电话</label>
                                                <div class="col-sm-10">
                                                    <input type="text" v-model="item.telephone"
                                                           placeholder="电话" id="input-telephone3" class="form-control"></div>
                                            </div>

                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label" >省份</label>
                                                <div class="col-sm-10">
                                                    <select v-model="item.province_obj"
                                                            v-on:change="change_city_list(item)"
                                                            class="form-control" >
                                                        <option value="0"> ---请选择--- </option>
                                                        <option v-for="prov in province_list"

                                                                v-bind:value="prov"> {{prov.name}} </option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label" >城市</label>
                                                <div class="col-sm-10">
                                                    <select v-model="item.city_obj"
                                                            v-on:change="change_area_list( item )"

                                                            class="form-control" >
                                                        <option value="0"> ---请选择--- </option>
                                                        <option v-for="ct in item.city_list" v-bind:value="ct" > {{ct.name}} </option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label"  >区县</label>
                                                <div class="col-sm-10">
                                                    <select v-model="item.area_obj"
                                                            id="input-county3" class="form-control">
                                                        <option value="0"> ---请选择--- </option>
                                                        <option v-for="ar in item.area_list" v-bind:value="ar">{{ar.name}}</option>
                                                    </select>
                                                </div>
                                            </div>


                                            <div class="form-group required">
                                                <label class="col-sm-2 control-label" for="input-address-13">详细地址</label>
                                                <div class="col-sm-10">
                                                    <input type="text"
                                                           v-model="item.detail_address"
                                                           placeholder="详细地址" id="input-address-13" class="form-control">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">默认地址</label>
                                                <div class="col-sm-10"><label class="radio">
                                                    <input type="radio" v-on:click="check_default_address( item )" v-model="item.is_default" value="1"></label>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                <!---->
                </form>

            </div>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        data:function(){

            return {

                customer_id:0,
                customer_info:{},
                customer_group_list:[],
                address_list:[],
                province_list:[],
                new_address:{

                    name:'',
                    telephone:'',
                    province_obj:{},
                    city_obj:{},
                    area_obj:{},
                    province_id:'',
                    province_name:'',
                    city_id:'',
                    city_name:'',
                    area_id:'',
                    area_name:'',
                    detail_address:'',
                    is_default:0,
                    city_list:[],
                    area_list:[],
                },
                password:'',            // 密码修改
                password_confirm:'',    // 密码确认
            }
        },

        methods:{

            do_edit:function(){

                var url = this.config.web_url + '/admin.php?r=customer/customer/edit&customer_id=' + this.customer_id;
                var t = this;

                var data = '';
                for(var p in this.customer_info ){
                    data += p + '=' + this.customer_info[p] + '&';
                }

                for(var i = 0;i < this.address_list.length; i ++ ){
                    data += '&address_list[' + i + ']' + '[name]=' + this.address_list[i]['name'];
                    data += '&address_list[' + i + ']' + '[telephone]=' + this.address_list[i]['telephone'];
                    data += '&address_list[' + i + ']' + '[province_id]=' + this.address_list[i].province_obj.zone_id;
                    data += '&address_list[' + i + ']' + '[province_name]=' + this.address_list[i].province_obj.name;
                    data += '&address_list[' + i + ']' + '[city_id]=' + this.address_list[i].city_obj.city_id;
                    data += '&address_list[' + i + ']' + '[city_name]=' + this.address_list[i].city_obj.name;
                    data += '&address_list[' + i + ']' + '[area_id]=' + this.address_list[i].area_obj.city_id;
                    data += '&address_list[' + i + ']' + '[area_name]=' + this.address_list[i].area_obj.name;
                    data += '&address_list[' + i + ']' + '[detail_address]=' + this.address_list[i]['detail_address'];
                    data += '&address_list[' + i + ']' + '[is_default]=' + this.address_list[i]['is_default'];
                }
                this.axios.post( url, data ).then(function( res ){

                    if( res.status ){
                        alert(res.description);
                    }else{
                        //todo 跳转到列表
                        this.$router.push('/customer/customer');
                    }

                });

            },

            init_address_list:function( address_list ){

                this.address_list = [];
                for( var i = 0; i < address_list.length; i ++ ){

                    var addr = {};
                    for(var p in this.new_address){
                        if( typeof address_list[i][p] != 'undefined' ){
                            addr[p] = address_list[i][p];
                        }else{
                            addr[p] = this.new_address[p];
                        }
                    }
                    this.address_list.push( addr );

                }

            },

            get_customer_info:function(){

                var url = this.config.web_url + '/admin.php?r=customer/customer&customer_id=' + this.customer_id;
                var t = this;

                this.axios.get( url ).then(function( res ){

                    t.customer_info = res.data.customer;
                    // t.address_list = res.data.customer.address_list;
                    t.init_address_list( res.data.customer.address_list );

                    for( var i = 0; i < t.address_list.length;  i++ ){

                        for( var j = 0; j < t.province_list.length;  j++ ){
                            if( t.address_list[i].province_id == t.province_list[j].zone_id ){
                                t.address_list[i].province_obj = t.province_list[j];
                                t.change_city_list( t.address_list[i] );

                            }
                        }


                    }

                });

            },

            get_all_customer_group:function(){

                var url = this.config.web_url + '/admin.php?r=customer/customer_group';
                var t = this;

                this.axios.get( url ).then(function( res ){

                    t.customer_group_list = res.data;

                });

            },

            add_address:function(){

                var addr = {};
                for(var p in this.new_address ){
                    addr[p] = this.new_address[p];
                }
                this.address_list.push( addr );
            },

            remove_address:function( address ){
                var index = this.address_list.indexOf( address );
                this.address_list.splice( index,1 );
            },

            get_province_list:function(){

                var url = this.config.web_url + '?r=zone';
                var t = this;

                this.axios.get( url ).then(function( res ){

                    t.province_list = res.data;

                });

            },

            change_city_list:function( address ){

                console.log( address );
                var url = this.config.web_url + '?r=zone/city';
                url += '&province_id=' + address.province_obj.zone_id ;
                var t = this;

                this.axios.get( url ).then(function( res ){

                    address.city_list = res.data;
                    for(var i = 0; i < address.city_list.length; i ++ ){
                        if( address.city_list[i].city_id == address.city_id ){
                            address.city_obj = address.city_list[i];
                            t.change_area_list( address );
                        }
                    }

                });

            },
            change_area_list:function( address ){

                var url = this.config.web_url + '?r=zone/district&city_id=' + address.city_obj.city_id;
                var t = this;

                this.axios.get( url ).then(function( res ){

                    address.area_list = res.data;
                    for(var i = 0; i < address.area_list.length; i ++ ){
                        if( address.area_list[i].city_id == address.area_id ){
                            address.area_obj = address.area_list[i];
                        }
                    }
                });
            },

            check_default_address:function( address ){

                for( var i = 0; i < this.address_list.length; i ++  ){

                    this.address_list[i].is_default = 0;
                }

                address.is_default = 1;
            }

        },


        created:function(){

            this.get_province_list();

            if( typeof this.$route.params != undefined ){
                this.customer_id = this.$route.params.customer_id ;
                this.get_customer_info();
            }

            this.get_all_customer_group();


        }

    }
</script>

<style scoped>

</style>